<template>
  <div>
<van-nav-bar title="请输入支付密码" left-arrow @click-left="back">
  <div slot="right" @click="fhui">关闭</div>
    </van-nav-bar>
<div style="margin:80px auto;width:10rem;height:10rem">
  <van-image
  round
  width="10rem"
  height="10rem"
  src="https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=2289803650,2303177422&fm=74&app=80&f=PNG&size=f121,121?sec=1880279984&t=1722e6582c94cc3b294f25f2e981b81d"
/>
</div>
<van-row style="padding:17px">
    <span>应付金额</span><span style="margin-left:15px;color:#f2115c">￥{{price}}</span>
</van-row>
<van-password-input
  :value="value"
  info="输入支付密码"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<van-number-keyboard
  :show="showKeyboard"
  @input="onInput"
  @delete="onDelete"
  @blur="showKeyboard = false"
/>
  </div>
</template>

<script>
export default {
  watch: {
    value: {
      deep: true,
      handler: function () {
        if (this.value.length === 6) {
          this.$http.post('/zfpay', { userid: this.userid, paypassword: this.value, orderid: this.orderid }).then(res => {
            if (res.data.ok === 1) {
              this.$router.push('/sworder')
              sessionStorage.setItem('active', 2)
            }
            // console.log(res)
          })
        }
      }
    }
  },
  data () {
    return {
      value: '',
      showKeyboard: true,
      userid: 1,
      price: 0,
      orderid: 0
    }
  },
  methods: {
    //   返回上一级
    back () {
      this.$router.go(-1) // 返回上一层
    },
    onClickRight () {},
    onInput (key) {
      this.value = (this.value + key).slice(0, 6)
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1)
    },
    async getorder () {
      const { data: res } = await this.$http.post('/pays', { userid: this.userid })
      this.orderid = res.data.id
      this.price = res.data.sumprice
    },
    fhui () {
      this.$dialog.confirm({
        title: '确定要离开收银台',
        message: '请您在23小时59分钟之内完成支付,超时未支付自动取消'
      }).then(() => {
        this.$http.post('/zfpays', { userid: this.userid, orderid: this.orderid }).then(res => {
          // console.log(res)
          if (res.data.ok === 1) {
            this.$router.push('/sworder')
            sessionStorage.setItem('active', 1)
          }
        })
      }).catch(() => {
        this.showKeyboard = true
      })
    }
  },
  created () {
    this.getorder()
    let userid = sessionStorage.getItem('userid')
    if (userid) {
      this.userid = userid
    }
  }
}
</script>

<style lang='less'>
.van-nav-bar .van-icon {
  color: #333;
  font-size: 25px;
}
.van-hairline--left{
  background-color: #f20c59;
  color: white;
}
</style>
